/**
 * 厨师工作站专用JavaScript
 */

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化订单操作
    initOrderActions();
    
    // 初始化WebSocket连接
    initWebSocket();
    
    // 自动刷新订单列表
    initAutoRefresh();
    
    // 添加全局WebSocket错误处理
    window.addEventListener('error', function(event) {
        // 检查是否是WebSocket相关错误
        if (event && event.error && (
            (event.error.message && event.error.message.includes('WebSocket')) || 
            (event.error.stack && event.error.stack.includes('WebSocket'))
        )) {
            console.error('捕获到WebSocket相关错误:', event.error);
            
            // 如果WebSocket对象存在但已经关闭或正在关闭，尝试重新连接
            if (window.chefWebSocket && 
                (window.chefWebSocket.readyState === WebSocket.CLOSED || 
                 window.chefWebSocket.readyState === WebSocket.CLOSING)) {
                
                console.log('检测到WebSocket连接已关闭，尝试重新连接...');
                
                // 确保清理之前的连接和定时器
                if (window.chefWebSocket.pingInterval) {
                    clearInterval(window.chefWebSocket.pingInterval);
                }
                if (window.chefWebSocket.healthCheckInterval) {
                    clearInterval(window.chefWebSocket.healthCheckInterval);
                }
                if (window.chefWebSocket.reconnectTimer) {
                    clearTimeout(window.chefWebSocket.reconnectTimer);
                }
                
                // 延迟1秒后重新连接
                setTimeout(initWebSocket, 1000);
            }
        }
    });
});

/**
 * 初始化订单操作
 */
function initOrderActions() {
    // 完成所有菜品按钮
    const completeAllItemsBtns = document.querySelectorAll('.btn-complete-all-items');
    completeAllItemsBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const orderId = this.dataset.orderId;
            completeAllOrderItems(orderId);
        });
    });
    
    // 完成订单按钮
    const completeOrderBtns = document.querySelectorAll('.btn-complete-order');
    completeOrderBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const orderId = this.dataset.orderId;
            updateOrderStatus(orderId, 'completed');
        });
    });
    
    // 开始制作按钮
    const startCookingBtns = document.querySelectorAll('.btn-start-cooking');
    startCookingBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const orderId = this.dataset.orderId;
            updateOrderStatus(orderId, 'cooking');
        });
    });
    
    // 完成项目按钮
    const completeItemBtns = document.querySelectorAll('.btn-complete-item');
    completeItemBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const orderItemId = this.dataset.orderItemId;
            updateOrderItemStatus(orderItemId, 'completed');
        });
    });
}

/**
 * 完成订单的所有菜品
 * @param {number} orderId 订单ID
 */
function completeAllOrderItems(orderId) {
    // 显示加载中提示
    showAlert('正在完成所有菜品...', 'info');
    
    fetch('/api/orders.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            action: 'complete_all_items',
            order_id: orderId
        })
    })
    .then(response => {
        console.log(`完成菜品响应状态码: ${response.status}`);
        
        // 检查响应状态
        if (!response.ok) {
            throw new Error(`服务器返回状态码 ${response.status}`);
        }
        
        // 检查内容类型并安全地处理
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            // 尝试读取文本响应
            return response.text().then(text => {
                console.error('服务器响应不是JSON:', text);
                throw new Error('返回的不是JSON格式');
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('完成所有菜品响应:', data);
        
        if (data.success) {
            showAlert('所有菜品已标记为完成', 'success');
            
            // 更新界面
            const orderCard = document.querySelector(`#order-${orderId}`);
            if (orderCard) {
                // 更新所有菜品状态
                const statusElements = orderCard.querySelectorAll('.order-item-status');
                statusElements.forEach(element => {
                    element.textContent = '已完成';
                    element.className = 'order-item-status status-completed';
                });
                
                // 更新所有菜品按钮
                const actionElements = orderCard.querySelectorAll('.order-item-actions');
                actionElements.forEach(element => {
                    element.innerHTML = `<span class="text-success"><i class="fas fa-check-circle"></i> 已完成</span>`;
                });
                
                // 启用完成订单按钮
                const completeOrderBtn = orderCard.querySelector('.btn-complete-order');
                if (completeOrderBtn) {
                    completeOrderBtn.classList.remove('btn-secondary');
                    completeOrderBtn.classList.add('btn-success');
                    completeOrderBtn.removeAttribute('disabled');
                }
                
                // 隐藏"所有菜品完成"按钮
                const completeAllItemsBtn = orderCard.querySelector('.btn-complete-all-items');
                if (completeAllItemsBtn) {
                    completeAllItemsBtn.style.display = 'none';
                }
            }
        } else {
            showAlert(data.message || '操作失败', 'danger');
        }
    })
    .catch(error => {
        console.error('完成所有菜品失败:', error);
        
        // 提供友好的错误消息
        showAlert(`请求发生错误: ${error.message}`, 'danger');
        
        // 延迟刷新页面，避免无法继续操作
        setTimeout(() => {
            window.location.reload();
        }, 3000);
    });
}

/**
 * 更新订单状态
 * @param {number} orderId 订单ID
 * @param {string} status 状态
 */
function updateOrderStatus(orderId, status) {
    // 显示加载中提示
    showAlert('正在更新订单状态...', 'info');
    
    fetch('/api/orders.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            action: 'update_status',
            order_id: orderId,
            status: status
        })
    })
    .then(response => {
        console.log(`订单状态更新响应状态码: ${response.status}`);
        
        // 检查响应状态
        if (!response.ok) {
            throw new Error(`服务器返回状态码 ${response.status}`);
        }
        
        // 检查内容类型
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            // 尝试读取文本响应
            return response.text().then(text => {
                console.error('服务器响应不是JSON:', text);
                throw new Error('返回的不是JSON格式');
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('订单状态更新响应:', data);
        
        if (data.success) {
            showAlert('订单状态已更新', 'success');
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            showAlert(data.message || '更新失败', 'danger');
        }
    })
    .catch(error => {
        console.error('更新订单状态失败:', error);
        
        // 不管什么错误，显示友好的错误消息
        showAlert(`请求发生错误: ${error.message}`, 'danger');
        
        // 延迟刷新页面，避免无法继续操作
        setTimeout(() => {
            window.location.reload();
        }, 3000);
    });
}

/**
 * 更新订单项状态
 * @param {number} orderItemId 订单项ID
 * @param {string} status 状态
 */
function updateOrderItemStatus(orderItemId, status) {
    // 显示加载中提示
    showAlert('正在更新菜品状态...', 'info');
    
    // 强制将状态设置为completed，无论传入的status是什么
    status = 'completed';
    
    console.log(`准备发送订单项状态更新请求: 订单项ID=${orderItemId}, 状态=${status}`);
    
    fetch('/api/orders.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            action: 'update_item_status',
            order_item_id: orderItemId,
            status: status
        })
    })
    .then(response => {
        console.log(`菜品状态更新响应状态码: ${response.status}`);
        
        // 检查响应状态
        if (!response.ok) {
            throw new Error(`服务器返回状态码 ${response.status}`);
        }
        
        // 检查内容类型
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            // 尝试读取文本响应
            return response.text().then(text => {
                console.error('服务器响应不是JSON:', text);
                throw new Error('返回的不是JSON格式');
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('菜品状态更新响应:', data);
        
        if (data.success) {
            showAlert('菜品状态已更新', 'success');
            
            // 记录返回的数据，用于调试
            if (data.item) {
                console.log('返回的订单项数据:', data.item);
            }
            
            if (data.order) {
                console.log('返回的订单数据:', data.order);
            }
            
            if (data.all_items) {
                console.log('返回的所有订单项数据:', data.all_items);
            }
            
            // 更新界面状态
            const itemElement = document.querySelector(`[data-item-id="${orderItemId}"]`);
            if (itemElement) {
                const statusElement = itemElement.querySelector('.order-item-status');
                statusElement.textContent = getStatusText(status);
                statusElement.className = `order-item-status status-${status}`;
                
                // 更新按钮显示
                const actionsElement = itemElement.querySelector('.order-item-actions');
                if (status === 'cooking') {
                    actionsElement.innerHTML = `<button class="btn btn-sm btn-success btn-complete-item" data-order-item-id="${orderItemId}">完成</button>`;
                } else if (status === 'completed') {
                    actionsElement.innerHTML = `<span class="text-success"><i class="fas fa-check-circle"></i> 已完成</span>`;
                }
                
                // 重新绑定事件
                const completeItemBtn = actionsElement.querySelector('.btn-complete-item');
                if (completeItemBtn) {
                    completeItemBtn.addEventListener('click', function() {
                        updateOrderItemStatus(orderItemId, 'completed');
                    });
                }
            }
            
            // 检查是否所有菜品都已完成
            checkOrderCompletion();
            
            // 获取订单卡片元素
            const orderCard = itemElement ? itemElement.closest('.order-card') : null;
            if (orderCard) {
                const orderId = orderCard.dataset.orderId;
                const allItemsCompleted = Array.from(orderCard.querySelectorAll('.order-item-status'))
                    .every(item => item.textContent.trim() === '已完成');
                
                // 如果所有菜品已完成，启用"完成订单"按钮
                if (allItemsCompleted) {
                    const completeOrderBtn = orderCard.querySelector('.btn-complete-order');
                    if (completeOrderBtn) {
                        completeOrderBtn.classList.remove('btn-secondary');
                        completeOrderBtn.classList.add('btn-primary');
                        completeOrderBtn.removeAttribute('disabled');
                    }
                }
            }
        } else {
            showAlert(data.message || '更新失败', 'danger');
        }
    })
    .catch(error => {
        console.error('更新菜品状态失败:', error);
        
        // 提供友好的错误消息
        showAlert(`请求发生错误: ${error.message}`, 'danger');
        
        // 延迟刷新页面，避免无法继续操作
        setTimeout(() => {
            window.location.reload();
        }, 3000);
    });
}

/**
 * 检查订单是否所有菜品都已完成
 */
function checkOrderCompletion() {
    const orderCards = document.querySelectorAll('.order-card');
    
    orderCards.forEach(card => {
        const orderItems = card.querySelectorAll('.order-item');
        let allCompleted = true;
        
        orderItems.forEach(item => {
            const status = item.querySelector('.order-item-status').textContent;
            if (status !== '已完成') {
                allCompleted = false;
            }
        });
        
        if (allCompleted) {
            const completeOrderBtn = card.querySelector('.btn-complete-order');
            if (completeOrderBtn) {
                completeOrderBtn.classList.remove('btn-secondary');
                completeOrderBtn.classList.add('btn-success');
                completeOrderBtn.removeAttribute('disabled');
            }
        }
    });
}

/**
 * 获取状态文本
 * @param {string} status 状态
 * @returns {string} 状态文本
 */
function getStatusText(status) {
    switch (status) {
        case 'pending': return '待处理';
        case 'cooking': return '制作中';
        case 'completed': return '已完成';
        default: return status;
    }
}

// 全局变量
let ws;
let heartbeatTimer = null;
let reconnectTimer = null;
const maxReconnectAttempts = 5;
let reconnectAttempts = 0;
let isConnected = false;

// 初始化WebSocket
function initWebSocket() {
    try {
        // 准备WebSocket URL
        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${location.hostname}:8080`;
        
        // 创建WebSocket连接
        ws = new WebSocket(wsUrl);
        
        // 连接打开
        ws.onopen = function() {
            console.log('WebSocket连接已建立');
            
            // 重置重连计数
            reconnectAttempts = 0;
            isConnected = true;
            
            // 清除之前的重连定时器
            if (reconnectTimer) {
                clearTimeout(reconnectTimer);
                reconnectTimer = null;
            }
            
            // 发送注册消息
            const registerMsg = {
                type: 'register',
                client_type: 'chef'
            };
            ws.send(JSON.stringify(registerMsg));
            
            // 设置心跳检测
            startHeartbeat();
            
            // 更新连接状态UI
            updateConnectionStatus(true);
        };
        
        // 接收消息
        ws.onmessage = function(event) {
            try {
                // 确保消息是字符串并且不为空
                if (typeof event.data === 'string' && event.data.trim()) {
                    const data = JSON.parse(event.data);
                    
                    // 处理不同类型的消息
                    switch (data.type) {
                        case 'register_success':
                            console.log('注册成功:', data.message);
                            break;
                            
                        case 'pong':
                            // 收到心跳响应，更新最后活动时间
                            console.log('收到心跳响应');
                            break;
                            
                        case 'order_new':
                            // 处理新订单
                            console.log('收到新订单:', data.order);
                            handleNewOrder(data.order);
                            break;
                            
                        case 'order_status':
                            // 处理订单状态更新
                            console.log('收到订单状态更新:', data.order);
                            handleOrderStatusUpdate(data.order);
                            break;
                            
                        default:
                            console.log('收到未知类型消息:', data);
                            break;
                    }
                } else {
                    console.warn('收到无效消息:', event.data);
                }
            } catch (error) {
                console.error('处理WebSocket消息出错:', error);
                
                // 对JSON解析错误做特殊提示
                if (error instanceof SyntaxError) {
                    console.warn('JSON解析错误，收到的消息:', event.data);
                }
            }
        };
        
        // 连接关闭
        ws.onclose = function(event) {
            console.log('WebSocket连接已关闭:', event.code, event.reason);
            isConnected = false;
            
            // 停止心跳检测
            stopHeartbeat();
            
            // 更新连接状态UI
            updateConnectionStatus(false);
            
            // 尝试自动重连
            if (reconnectAttempts < maxReconnectAttempts) {
                console.log(`尝试重新连接... (${reconnectAttempts + 1}/${maxReconnectAttempts})`);
                
                // 计算延迟时间，随着重试次数增加而增加等待时间
                const delay = Math.min(1000 * Math.pow(1.5, reconnectAttempts), 10000);
                
                reconnectTimer = setTimeout(function() {
                    reconnectAttempts++;
                    initWebSocket();
                }, delay);
            } else {
                console.error('无法连接到WebSocket服务器，已达到最大重试次数');
                // 提示用户手动刷新页面
                showConnectionError();
            }
        };
        
        // 连接错误
        ws.onerror = function(error) {
            console.error('WebSocket连接错误:', error);
            // 不在这里处理重连，让onclose来处理
        };
    } catch (error) {
        console.error('初始化WebSocket失败:', error);
        reconnectAttempts++;
        // 尝试重新连接
        if (reconnectAttempts < maxReconnectAttempts) {
            reconnectTimer = setTimeout(initWebSocket, 2000);
        } else {
            showConnectionError();
        }
    }
}

// 心跳检测
function startHeartbeat() {
    // 清除之前的心跳定时器
    stopHeartbeat();
    
    // 每20秒发送一次心跳
    heartbeatTimer = setInterval(function() {
        if (ws && ws.readyState === WebSocket.OPEN) {
            try {
                ws.send(JSON.stringify({
                    type: 'ping',
                    timestamp: Date.now()
                }));
            } catch (error) {
                console.error('发送心跳失败:', error);
                // 如果发送失败，尝试重新连接
                stopHeartbeat();
                ws.close();
            }
        } else {
            // WebSocket未连接，尝试重新连接
            stopHeartbeat();
            if (ws) ws.close();
        }
    }, 20000);
}

// 停止心跳检测
function stopHeartbeat() {
    if (heartbeatTimer) {
        clearInterval(heartbeatTimer);
        heartbeatTimer = null;
    }
}

// 更新连接状态UI
function updateConnectionStatus(connected) {
    const statusIndicator = document.getElementById('connection-status');
    if (!statusIndicator) return;
    
    if (connected) {
        statusIndicator.className = 'connection-status connected';
        statusIndicator.innerHTML = '<i class="fas fa-check-circle"></i> 已连接';
    } else {
        statusIndicator.className = 'connection-status disconnected';
        statusIndicator.innerHTML = '<i class="fas fa-times-circle"></i> 连接断开';
    }
}

// 显示连接错误提示
function showConnectionError() {
    Swal.fire({
        icon: 'error',
        title: '连接错误',
        text: '无法连接到服务器，请刷新页面重试',
        confirmButtonText: '刷新页面',
        allowOutsideClick: false
    }).then((result) => {
        if (result.isConfirmed) {
            location.reload();
        }
    });
}

// 处理新订单
function handleNewOrder(order) {
    // 播放提示音
    playNewOrderSound();
    
    // 刷新订单列表
    refreshOrders();
}

// 处理订单状态更新
function handleOrderStatusUpdate(order) {
    // 刷新订单列表
    refreshOrders();
}

// 刷新订单列表
function refreshOrders() {
    // 显示加载指示器
    showLoadingSpinner();
    
    // 延迟执行以确保后端数据更新完成
    setTimeout(function() {
        // 重新加载页面
        location.reload();
    }, 500);
}

// 显示加载指示器
function showLoadingSpinner() {
    // 如果页面上没有加载指示器，创建一个
    if (!document.getElementById('loading-spinner')) {
        const spinner = document.createElement('div');
        spinner.id = 'loading-spinner';
        spinner.className = 'loading-overlay';
        spinner.innerHTML = '<div class="spinner"><i class="fas fa-spinner fa-spin fa-3x"></i><p>正在更新...</p></div>';
        document.body.appendChild(spinner);
    }
}

// 播放新订单提示音
function playNewOrderSound() {
    const audio = new Audio('/chushi/assets/sounds/new-order.mp3');
    audio.play().catch(err => {
        console.warn('无法播放提示音:', err);
    });
}

/**
 * 初始化自动刷新功能
 */
function initAutoRefresh() {
    // 只在订单页面启用自动刷新
    if (window.location.pathname.includes('/orders.php')) {
        // 每60秒刷新一次
        setInterval(() => {
            fetch('/chushi/orders_data.php', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`服务器返回状态码 ${response.status}`);
                }
                
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    throw new Error('返回的不是JSON格式');
                }
            })
            .then(data => {
                if (data.success) {
                    updateOrdersView(data.orders);
                } else if (data.message) {
                    console.warn('自动刷新获取数据失败:', data.message);
                }
            })
            .catch(error => {
                console.error('获取订单数据失败:', error);
                // 不显示提示，因为是自动刷新，避免频繁显示错误
            });
        }, 60000);
    }
}

/**
 * 更新订单视图
 * @param {Array} orders 订单数据
 */
function updateOrdersView(orders) {
    const ordersContainer = document.getElementById('orders-container');
    if (!ordersContainer) return;
    
    // 获取当前显示的订单ID列表
    const currentOrderIds = Array.from(document.querySelectorAll('.order-card'))
        .map(card => parseInt(card.dataset.orderId));
    
    // 检查是否有新订单
    orders.forEach(order => {
        if (!currentOrderIds.includes(order.id)) {
            // 播放提示音
            const audio = new Audio('/assets/audio/notification.mp3');
            audio.play();
            
            // 创建新订单卡片HTML
            const orderCard = createOrderCardHtml(order);
            
            // 添加到容器顶部
            ordersContainer.insertAdjacentHTML('afterbegin', orderCard);
            
            // 绑定事件
            initOrderActions();
        }
    });
}

/**
 * 创建订单卡片HTML
 * @param {Object} order 订单数据
 * @returns {string} HTML字符串
 */
function createOrderCardHtml(order) {
    // 构建订单项HTML
    let itemsHtml = '';
    order.items.forEach(item => {
        itemsHtml += `
            <div class="order-item" data-item-id="${item.id}">
                <div class="order-item-name">${item.product_name}</div>
                <div class="order-item-quantity">x${item.quantity}</div>
                <div class="order-item-status status-${item.status}">${getStatusText(item.status)}</div>
                <div class="order-item-actions">
                    ${item.status === 'completed' ? 
                      `<span class="text-success"><i class="fas fa-check-circle"></i> 已完成</span>` :
                      `<button class="btn btn-sm btn-success btn-complete-item" data-order-item-id="${item.id}">完成</button>`
                    }
                </div>
            </div>
        `;
    });
    
    // 构建完整的订单卡片HTML
    return `
        <div class="order-card" id="order-${order.id}" data-order-id="${order.id}">
            <div class="order-header">
                <div class="order-number">订单 #${order.queue_number}</div>
                <div class="order-status status-${order.status}">${getStatusText(order.status)}</div>
            </div>
            <div class="order-items">
                ${itemsHtml}
            </div>
            <div class="order-footer">
                <div class="order-time">${order.created_at}</div>
                <div class="order-actions">
                    ${order.status === 'paid' ? 
                      `<button class="btn btn-primary btn-start-cooking" data-order-id="${order.id}">开始制作</button>` :
                      order.status === 'cooking' ? 
                      `<button class="btn btn-secondary btn-complete-order" data-order-id="${order.id}" disabled>完成订单</button>` :
                      `<button class="btn btn-outline-success" disabled>已完成</button>`
                    }
                </div>
            </div>
        </div>
    `;
} 